<template>
    <div :class="fixedBox?'fixed-box':'cs-wraper'">
        <div class="create-step">
            <div class="step-active-bar" :class="'slider'+activeStep"></div>
            <!-- <div class="step-active-bar" :class="'slider'+activeStep" v-show="activeStep!='0'"></div> -->
            <div @click="stepClick(item)"
                 v-for="item in stepLists"
                 class="create-step-li"
                 :class="item.style">
                <div class="step-title"><span>{{item.step}}</span></div>
                <div class="step-content">
                    <p v-if="item.step =='1'" class="step-content-title no-info">{{item.title}}</p>
                    <p v-else-if="item.step =='2'" class="step-content-title no-info">{{item.title}}</p>
                    <p v-else-if="item.step =='3'" class="step-content-title no-info">{{item.title}}</p>
                    <p v-else-if="item.step =='4'" class="step-content-title no-info">{{item.title}}</p>
                </div>

                <div class="step-check"><i :class="item.icon"></i></div>


                <div class="step-info-box" v-if="item.step =='1'">
                    <p class="step-content-info">投放平台：{{adPlatform || '--'}}</p>
                    <p v-show="adPlatform == 'Facebook'" class="step-content-info">目标：{{adverPlan}}</p>
                </div>

                <div class="step-info-box" v-if="item.step =='2'&&stepLists[0].created">
                    <p v-if="adPlatform == 'Facebook'" :title="audienceCountTips.allCount" class="step-content-info">预计覆盖人数：<span style="color: #ff3526">{{audienceCountTips.allCount}}</span></p>
                    <div v-else-if="adPlatform == 'Google'">
                        <p class="step-content-info"><span class="two-titile">每日预估展示数：</span><span>{{ggAudienceCountTips.impressions | ceilNum}}</span></p>
                        <p class="step-content-info"><span class="two-titile">点击数：</span><span>{{ggAudienceCountTips.click | ceilNum}}</span></p>
                        <p class="step-content-info"><span class="two-titile">费用：</span><span style="color: #ff3526">￥{{ggAudienceCountTips.cost | doubleFloat}}</span></p>
                    </div>
                </div>

                <div class="step-info-box" v-if="item.step =='3'&&stepLists[1].created">
                    <p  class="step-content-info">单日预算：<span style="color: #ff3526">￥{{stepBudget}}</span></p>
                    <p  :title="stepSchedule" class="step-content-info">排期：{{stepSchedule}}</p>
                    <p  :title="stepClickCost" class="step-content-info">竞价金额：{{stepClickCost || '自动'}}</p>
                </div>

                <div class="step-info-box" v-if="item.step =='4'">
                    <p v-if="stepAdTest > 1 && item.style == 'li-active'" :title="stepAdTest" class="step-content-info"> <span v-if="adPlatform == 'Facebook'">Facebook</span><span v-else="">Google</span> 拆分广告：{{stepAdTest}}个</p>
                </div>
            </div>
        </div>
        <div class="error_con" v-if="adErrorData && adErrorData.length">
            <div class="error_title">错误详情：<i @click="handleErrorClose" class="el-icon-close"></i></div>
            <ul class="error_tips">
                <li v-for="item in adErrorData">{{item}}</li>
            </ul>
        </div>

    </div>
</template>
<style>
</style>
<script>
    import Vue from 'vue'
    import { mapGetters, mapActions, mapMutations} from 'vuex';
    export default{
        data () {
            return {
                fixedBox:false
            }
        },
        filters:{
            //取整
            ceilNum(value){
                if(value){
                    return Math.round(value);
                }else{
                    return 0;
                }
                
            },
            //两位小数
            doubleFloat(value){
                if(value){
                    return Math.floor(value * 100) / 100;
                }else{
                    return 0;
                }
            }
        },
        computed : {
            ...mapGetters({
                'stepLists' : 'adStepList',
                'activeStep' : 'activeStep',
                'adverPlan' : 'adverPlan',
                'audienceCountTips' : 'audienceCountTips',
                'ggAudienceCountTips' : 'ggAudienceCountTips',
                'stepBudget' : 'stepBudget',
                'stepSchedule' : 'stepSchedule',
                'stepClickCost' : 'stepClickCost',
                'stepAdTest' : 'stepAdTest',
                'adPlatform' : 'adPlatform',
                'adErrorData' : 'adErrorData'
            })
        },
        mounted(){
            window.onscroll = function(){
                let scrollY = window.scrollY
                if(scrollY>150){
                    this.fixedBox = true;
                }else{
                    this.fixedBox = false;
                }
            }.bind(this);
        },
        methods:{
            //状态：li-default:默认；li-created：已创建；li-click：可点击；li-actvie：选中状态
            stepClick(item){
                if(!item.click) return;
                for(let i = 0; i<this.stepLists.length; i++){
                    if(this.stepLists[i].style == 'li-active'){
                        this.stepLists[i].style = this.stepLists[i].created?"li-created":"li-click"
                        this.stepLists[i].icon = this.stepLists[i].created?"el-icon-check":"el-icon-arrow-right"
                    }
                }
                item.style = "li-active";
                item.icon = "el-icon-arrow-right";
                this.$store.commit('ACTIVE_STEP', {step:item.step});
            },
            handleErrorClose() {
                this.$store.commit('ADERRORDATA',{data: []})
            }
        }
    }
</script>

<style lang="scss" scoped>
$MainColor: #0686F9;
$warnningColor:#FFB100;
$mainBorder: #EAEEF0;
$disableColor:#D5DFE4;
$disClickColor:#999999;
$bgColor: #F4F7F9;
$fontColor:#333333;
.error_con{
    float: left;
    width: 220px;
    padding: 12px 8px;
    box-sizing: border-box;
    background-color: #ffeae9;
    color: #ff3526;
    font-size: 12px;
    .el-icon-close{
        position: absolute;
        right: 8px;
        top: 2px;
        cursor: pointer;
        color: #b6c1c8;
        font-size: 12px;
    }
    .error_title{
        margin-bottom: 6px;
        position: relative;
        font-weight: 700;
        line-height: 14px;
    }
    li{
        word-break: break-all;
        line-height: 16px;
        &::before {
            content: '• ';
         }
        & + li{
                margin-top: 5px;
            }
    }
}
.cs-wraper{
    position: relative;
    float: left;
    width: 228px;
    overflow: hidden;
}
.fixed-box{
    position: fixed;
    top:0;
    float: left;
    width: 228px;
    overflow: hidden;
}
.create-step{
    //height: 368px;
    max-height: 454px;
    position: relative;
    float: left;
    width: 228px;
    background: #FFFFFF;
    border: 1px solid $mainBorder;
    border-bottom:0;
    border-radius: 4px;
    overflow: hidden;
    .el-icon-arrow-right{
        font-weight: bold;
    }
    .step-info-box{
        padding-top: 10px;
        padding-left:16px;
        width: 200px;
    }
}
.slider1{
    transform: translateY(0px);
}
.slider2{
    transform: translateY(114px);
}
.slider3{
    transform: translateY(228px);
}
.slider4{
    transform: translateY(341px);
}
.slider5{
    transform: translateY(374px);
}
.step-active-bar{
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 110px;
    background-color: $MainColor;
    border-radius:2px;
    z-index: 1;
    transition: transform .3s cubic-bezier(.645,.045,.355,1);
    list-style: none;
}
.two-titile{
    display: inline-block;
    width: 100px;
    text-align: right;
}
.create-step-li{
    cursor: pointer;
    box-sizing:border-box;
    width: 230px;
    height: 82px;
    padding:10px 0;
    background: #FFFFFF;
    border: 1px solid transparent;
    border-left:2px solid transparent;
    margin-bottom: 4px;
}
.create-step-li > div{
    float: left;
}
.li-default{
    .step-title{
        line-height: 50px;
        span{
            background:$warnningColor;
        }
    }
    .step-check{
        color:$disableColor;
        float: right;
    }
    .step-content{
        .step-content-title{
            color: $disClickColor;
        }
    }
}
.li-default:hover{
    background:$bgColor;
}
.li-click{
    height: 110px;
    .step-title{
        line-height: 30px;
        height: 30px;
        span{
            background:$warnningColor;
        }
    }
    .no-info{
        line-height: 30px;
        height: 30px;
    }
    .step-check{
        color:$disableColor;
        float: right;
        line-height: 30px;
        height: 30px;
    }
    .step-content{
        height: 30px;
        .step-content-title{
            color: $fontColor;
        }
    }
}
.li-active{
    height: 110px;
    border: 1px solid $mainBorder;
    border-left:2px solid transparent;
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.06);
    .step-title{
        line-height: 30px;
        height: 30px;
        span{
            background:$MainColor;
        }
    }
    .no-info{
        line-height: 30px;
        height: 30px;
    }
    .step-check{
        color:$MainColor; 
        float: right;
        line-height: 30px;
        height: 30px;
    }
    .step-content{
        height: 30px;
    }
}
.li-created{
    height: 110px;
    .step-title{
        line-height: 30px;
        height: 30px;
        span{
            background:$MainColor;
        }
    }
    .no-info{
        line-height: 30px;
        height: 30px;
    }
    .step-check{
        color:$MainColor;
        float: right;
        line-height: 30px;
        height: 30px;
    }
    .step-content{
        height: 30px;
    }
}
.create-step-li:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.step-title{
    height: 50px;
    line-height: 50px;
    width: 40px;
    text-align: center;
}
.step-title > span{
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius:50%;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
}
.step-content{
    height: 50px;
    width: 150px;
    text-align:left;
    padding-left: 10px;

}
.step-content-title{
    margin:0;
    font-size: 14px;
    color: #333333;
}
.no-info{
    height: 50px;
    line-height: 50px;
}
.step-content-info{
    display: block;
    font-size: 12px;
    color: #999999;
    height: 16px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.step-check{
    height: 50px;
    line-height: 50px;
    width: 25px;
}

</style>